import {Image, StyleSheet, View, Text, TouchableOpacity, ScrollView} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {AppDispatch, RootState} from "@/store";
import {
    removeTicketDataByIndex,
    changeTicketDataIsOnSaleStatus,
    setEditTicketSetting,
    setEditTicketIndex,
    setTicketSettingStatus,
} from "@/store/slices/createActiveSilce"

export default function settingScreen() {

    const router = useRouter();

    const dispatch = useDispatch<AppDispatch>();
    const createActive = useSelector((state: RootState) => state.createActive);

    useEffect(() => {
        console.log('createActive', createActive?.ticketData)
    }, []);

    const goCreateTicket = function (index: number) {
        router.push("/createActivity/createTicket");
        dispatch(setEditTicketSetting({ editTicketSetting: true }))
        dispatch(setEditTicketIndex({ index }))
        dispatch(setTicketSettingStatus({ ticketSettingStatus: 'update' }))
    };

    const normalGocreateTicket = function () {
        dispatch(setTicketSettingStatus({ ticketSettingStatus: 'create' }))
        dispatch(setEditTicketSetting({ editTicketSetting: false }))
        router.push("/createActivity/createTicket");
    };

    const removeByIndex = function (index) {
        dispatch(removeTicketDataByIndex({ index }))
    };

    const changeTicketData = function (index, status) {
        dispatch(changeTicketDataIsOnSaleStatus({ index, status }))
    };

    const saveTicket = function () {
        router.push("/createActivity");
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '设置你的票种', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={styles.ticketSettingContainer}>
                <ScrollView style={{ flex: 1, }}>
                    {
                        createActive?.ticketData.map((item: any, index: number) => {
                            return (
                                <View style={styles.ticketWrap} key={index}>
                                    <View style={styles.ticketHeader}>
                                        <Text style={{ fontWeight: 400 }}>
                                            { `${item?.ticketName} ${ item?.price ? "" : "免费票" }` }
                                        </Text>
                                        {
                                            item?.isOnSale === 1 && (
                                                <Text style={{ color: "#68CA41" }}>
                                                    售票中
                                                </Text>
                                            )
                                        }

                                        {
                                            item?.isOnSale === 0 && (
                                                <Text style={{ color: "#FFB800" }}>
                                                    尚未售票
                                                </Text>
                                            )
                                        }

                                        {
                                            item?.isOnSale === 2 && (
                                                <Text style={{ color: "#ED2A20" }}>
                                                    暂停售票
                                                </Text>
                                            )
                                        }

                                    </View>
                                    <View style={styles.ticketBody}>
                                        <Text style={styles.ticketBodyLeft}>{ item?.price ? "收费票" : "免费票" }</Text>
                                        <Text style={[styles.ticketBodyRight, { letterSpacing: 1 }]}>{ createActive.ticketSettingStatus === 'create' ? "0" : item?.singleNum }/{ item?.quantity }</Text>
                                    </View>
                                    <View style={styles.ticketBody}>
                                        <Text style={styles.ticketBodyLeft}>票种说明</Text>
                                        <Text style={styles.ticketBodyRight}>{ item?.description }</Text>
                                    </View>
                                    <View style={styles.ticketFooter}>
                                        <View style={styles.footerLeft}>
                                            <TouchableOpacity onPress={() => goCreateTicket(index)}>
                                                <Text style={styles.footerSet}>设置</Text>
                                            </TouchableOpacity>
                                            <TouchableOpacity onPress={() => removeByIndex(index)}>
                                                <Text style={styles.footerDelete}>删除</Text>
                                            </TouchableOpacity>
                                        </View>
                                        {
                                            item?.isOnSale == 2 && (
                                                <TouchableOpacity onPress={() => changeTicketData(index, 1)}>
                                                    <View style={styles.ticketStatus}>
                                                        <Text style={styles.ticketStatusText}>开始售票</Text>
                                                    </View>
                                                </TouchableOpacity>
                                            )
                                        }

                                        {
                                            item?.isOnSale == 1 && (
                                                <TouchableOpacity onPress={() => changeTicketData(index, 0)}>
                                                    <View style={styles.ticketStatus}>
                                                        <Text style={styles.ticketStatusText}>暂停售票</Text>
                                                    </View>
                                                </TouchableOpacity>
                                            )
                                        }

                                    </View>
                                </View>

                            )
                        })
                    }

                </ScrollView>

                <View style={styles.footer}>
                    <TouchableOpacity onPress={normalGocreateTicket}>
                        <View style={styles.footerLeftBtn}>
                            <Text style={styles.footerLeftBtnText}>
                                创建活动票种
                            </Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={saveTicket}>
                        <View style={styles.footerRightBtn}>
                            <Text style={styles.footerRightBtnText}>
                                保存
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        </View>

    );
}

const styles = StyleSheet.create({
    ticketSettingContainer: {
        paddingHorizontal: 12,
        borderRadius: 10,
        flex: 1,
    },
    ticketWrap: {
        padding: 12,
        backgroundColor: "#fff",
        marginBottom: 12,
        borderRadius: 10,
    },
    ticketHeader: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingBottom: 12,
        borderBottomWidth: 0.3,
        borderBottomColor: "#E4E6EC",
    },
    ticketBody: {
        flexDirection: "row",
        marginTop: 12,
    },
    ticketBodyLeft: {
        width: 90,
        fontSize: 12,
    },
    ticketBodyRight: {
        flex: 1,
        fontSize: 12
    },
    ticketFooter: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginTop: 12,
    },
    footerSet: {
        color: "#EC6138",
        fontSize: 12,
        marginRight: 30,
    },
    ticketStatus: {
        paddingHorizontal: 12,
        paddingVertical: 6,
        borderRadius: 13,
        borderColor: "#EC6138",
        borderWidth: 0.5
    },
    ticketStatusText: {
        color: "#EC6138",
        fontSize: 12,
    },
    footerLeft: {
        flexDirection: "row",
    },
    footerDelete: {
        color: "#ED2A20",
        fontSize: 12,
    },
    footer: {
        backgroundColor: "#fff",
        paddingTop: 8,
        paddingBottom: 25,
        flexDirection: "row",
        justifyContent: "flex-end"
    },
    footerLeftBtn: {
        paddingVertical: 13,
        paddingHorizontal: 14,
        borderWidth: 0.5,
        borderColor: "#EC6138",
        borderRadius: 20,
    },
    footerLeftBtnText: {
        color: "#EC6138",
        fontSize: 12,
    },
    footerRightBtn: {
        paddingVertical: 13,
        paddingHorizontal: 41,
        borderWidth: 0.5,
        borderColor: "#EC6138",
        borderRadius: 20,
        backgroundColor: "#EC6138",
        marginLeft: 12,
    },
    footerRightBtnText: {
        color: "#FFF",
        fontSize: 12,
    },
});
